<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<title></title>
		<link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/layui.css}" />
		<link rel="stylesheet" th:href="@{/plugin/font-awesome/css/font-awesome.min.css}" media="all" />
		<link rel="stylesheet" th:href="@{/src/lvdong/origin/css/app.css}" media="all" />
		<link rel="stylesheet" th:href="@{/src/lvdong/origin/css/themes/default.css}" media="all" id="skin" kit-skin />
		<script th:src="@{/plugin/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
  		<script th:src="@{/plugin/jquery/jquery-3.4.1.js}" charset="utf-8"></script>
<script type="text/javascript">
	//更新所有的下拉选项
	function querySelect() {
		//组织项下拉框拼接
		var org = "";
		$.ajax({
			type : "post",
			url : "/organization/getAll.do",//从数据库查询所有的组织
			dataType : "json",
			contentType : "application/x-www-form-urlencoded; charset=UTF-8",
			async : false,
			cache : false,
			success : function(data) {
				for (var i = 0; i < data.length; i++) {
					org += "<option value="+data[i].organization_id+">"
							+ data[i].organization_name + "</option>";
				}
				$("#add-org").html(org);
			}
		});
		//更新部门下拉框
		var dep = "";
		$.ajax({
			type : "post",
			url : "/department/selectAll",//从数据库查询所有的部门
			dataType : "json",
			contentType : "application/x-www-form-urlencoded; charset=UTF-8",
			async : false,
			cache : false,
			success : function(data) {
				for (var i = 0; i < data.data.length; i++) {
					dep += "<option value="+data.data[i].department_id+">"
							+ data.data[i].department_name + "</option>";
				}
				$("#add-dep").html(dep);
			}
		});

		var roles = "";
		$
				.ajax({
					type : "post",
					url : "/role/selectAllRole",//从数据库查询所有的角色
					dataType : "json",
					contentType : "application/x-www-form-urlencoded; charset=UTF-8",
					async : false,
					cache : false,
					success : function(data) {
						for (var i = 0; i < data.data.length; i++) {
							roles += "<input type='checkbox' name='role' value='"+data.data[i].role_id+"' title='"+data.data[i].role_name+"'>"
						}
						$("#add-role").html(roles);
					}
				});
		var menus = "";
		$
				.ajax({
					type : "post",
					url : "/menu/selectAllMenu",//从数据库查询所有的菜单
					dataType : "json",
					contentType : "application/x-www-form-urlencoded; charset=UTF-8",
					async : false,
					cache : false,
					success : function(data) {
						for (var i = 0; i < data.data.length; i++) {
							menus += "<input type='checkbox' name='menu' value='"+data.data[i].menu_id+"' title='"+data.data[i].description+"'>"
						}
						$("#add-menu").html(menus);
					}
				});
	}
</script>
<script type="text/javascript">
	layui.use([ 'jquery', 'table', 'layer', 'form' ], function() {
		querySelect();
		var form = layui.form;
		form.render();
	});
</script>
</head>
<body>
	<form class="layui-form" action="" lay-filter="test">
		<div class="layui-form-item">
			<label class="layui-form-label">用户名</label>
			<div class="layui-input-block">
				<input type="text" id="add-username" name="username" required
					lay-verify="required" placeholder="login登录页面账号" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">用户密码</label>
			<div class="layui-input-block">
				<input type="password" id="password" name="password" required
					lay-verify="required" placeholder="请输入密码" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">确认密码</label>
			<div class="layui-input-block">
				<input type="password" id="re-password" name="re-password" required
					lay-verify="required" placeholder="再输入一次密码" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">真实姓名</label>
			<div class="layui-input-block">
				<input type="text" id="add-account" name="account" required
					lay-verify="required" placeholder="公司员工姓名" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label">部门</label>
			<div class="layui-input-block">
				<select id="add-dep" name="department" lay-verify="required">
				
				</select>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">所在组织</label>
			<div class="layui-input-block">
				<select id="add-org" name="organization" lay-verify="required">
				
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">角色</label>
			<div id="add-role" class="layui-input-block">
			
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">菜单管理</label>
			<div id="add-menu" class="layui-input-block">
			
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">账户状态</label>
			<div class="layui-input-block">
				<input type="radio" name="status" value="1" title="可用" checked> <input
					type="radio" name="status" value="0" title="禁用" >
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="formDemo">提交注册</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>

	<script>
		//Demo
		layui.use('form', function() {
			var form = layui.form;

			//监听提交
			form.on('submit(formDemo)', function(data) {
				//获取角色复选框的所有值
				var arr = new Array();
				var arr2 = new Array();
				$("input[name='role']:checked").each(function(index) {
					arr[index] = $(this).val();
				});
				$("input[name='menu']:checked").each(function(index) {
					arr2[index] = $(this).val();
				});
				$.ajax({
					url : "/userMg/insertUser",
					type : "POST",
					async: false,
			        cache: false,	
					data : {
						username : $("#add-username").val(),
						account : $("#add-account").val(),
						password:$("#password").val(),
						"department.department_id" : $("#add-dep").val(),
						"organization.organization_id" : $("#add-org").val(),
						status : $("input[name='status']:checked").val(),
						rolestr : arr.join(","),
						menustr : arr2.join(",")
					},
					dataType : 'json',
					success : function(data) {
						if (data.code == 200) {
							layer.close(layer.index);
							layer.msg(data.msg);
							table.reload('test');
						} else {
							layer.msg(data.msg);
						}
					},
					error : function() {
						console.log("ajax error");
					}
				});
			});
		});
	</script>
</body>
</html>
